<template>
  <div class="addUser">
    <a-button @click="handleClick" type="primary" status="success">添加用户</a-button>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        用户添加
      </template>
      <div>
        <!-- 用户添加 -->
        <a-form :model="form" :style="{ width: '450px' }" @submit="handleSubmit">

          <a-form-item field="name" tooltip="请输入简体中文" label="Username">
            <a-input v-model="form.name" placeholder="请输入你的名字" />
          </a-form-item>

          <a-form-item field="password" label="password">
            <a-input v-model="form.password" placeholder="请输入你的密码" />
          </a-form-item>

          <a-form-item field="isRead">
            <a-checkbox v-model="form.isRead"> 我已阅读手册 </a-checkbox>
          </a-form-item>

          <a-form-item>
            <a-button html-type="submit" type="primary">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <!-- 页面内容 -->
    <a-table :columns="columns" :data="data" />
  </div>
</template>

<script>
import { ref } from "vue";
import { reactive } from "vue";

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    };
    const form = reactive({
      name: "",
      post: "",
      isRead: false,
    });
    const handleSubmit = (data) => {
      console.log(data);
    };

    const columns = [
      {
        title: "姓名",
        dataIndex: "name",
      },
      {
        title: "年龄",
        dataIndex: "age",
      },
      {
        title: "权限",
        dataIndex: "Permissions",
      },
      {
        title: "Email",
        dataIndex: "email",
      },
    ];
    const data = reactive([
      {
        key: "1",
        name: "zhangsan",
        age: 23,
        Permissions: "32 Park Road, London",
        email: "jane.doe@example.com",
      },
      {
        key: "2",
        name: "Alisa Ross",
        age: 25,
        Permissions: "35 Park Road, London",
        email: "alisa.ross@example.com",
      },
      {
        key: "3",
        name: "Kevin Sandra",
        age: 22,
        Permissions: "31 Park Road, London",
        email: "kevin.sandra@example.com",
      },
      {
        key: "4",
        name: "Ed Hellen",
        age: 17,
        Permissions: "42 Park Road, London",
        email: "ed.hellen@example.com",
      },
      {
        key: "5",
        name: "William Smith",
        age: 27,
        Permissions: "62 Park Road, London",
        email: "william.smith@example.com",
      },
    ]);

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel,
      form,
      handleSubmit,
      columns,
      data,
    };
  },
};
</script>

<style>
.addUser {
  height: 100%;
}
</style>
